<template>
  <div class="ht-matrix__menu" id="btnGroup">
    <ul class="ht-matrix__menu-list">
      <li
        v-for="(item, index) in data"
        :key="index"
        :style="`background: linear-gradient(0deg, ${start}, ${end})`"
        @click="$emit('switch', item.label, index)"
      >
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    start: {
      type: String,
      default: '#0c334a',
    },
    end: {
      type: String,
      default: '#124f72',
    },
  },
};
</script>

<style lang="scss" scoped>
.ht-matrix__menu {
  position: absolute;
  z-index: 88;
  top: 0;
  left: 0;

  &-list {
    padding: 10px;

    li {
      display: block;
      cursor: pointer;
      width: calc(108px + 100vw / 1920 * 10);
      height: calc(30px + 100vw / 1920 * 10);
      line-height: calc(30px + 100vw / 1920 * 10);
      text-align: center;
      text-decoration: none;
      box-sizing: border-box;
      transition: 0.35s ease-in-out;
      border-radius: 2px;
      margin-bottom: 10px;

      span {
        color: #fff;
        font-size: calc(14px + 100vw / 1920 * 2);
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>
